সিএসএস(৩) দ্বারা আপনি একটি বাটনে আপনার পছন্দমত স্টাইল করতে পারেন। আমরা এই অধ্যায়ে দেখবো কিভাবে সিএসএস ব্যবহার করে বাটনের স্টাইল করা যায়।
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: whitesmoke;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>সিএসএস বাটন</h2>
<button>ডিফল্ট বাটন</button>
<a href="#" class="button">লিংক বাটন</a>
<button class="button">বাটন</button>
<input type="button" class="button" value="ইনপুট বাটন">
</body>
</html>
বাটনের ব্যাকগ্রাউন্ড কালার পরিবর্তন করতে background-color প্রোপারটি ব্যবহার করুনঃ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: whitesmoke;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {background-color: #4CAF50;} /* Green */
.button3 {background-color: #008CBA;} /* Blue */
.button4 {background-color: #f44336;} /* Red */
.button5 {background-color: #555555;} /* Black */
</style>
</head>
<body>
<h2>সিএসএস বাটন</h2>
<p> background-color প্রোপার্টির মাধ্যমে বাটনের ব্যাকগ্রাউন্ড কালার পরিবর্তন করা হয়।</p>
<button class="button">টিল</button>
<button class="button button2">সবুজ</button>
<button class="button button3">নীল</button>
<button class="button button4">লাল</button>
<button class="button button5">কালো</button>
</body>
</html>
বাটনের ফন্ট সাইজ পরিবর্তন করতে font-size প্রোপার্টি ব্যবহার করুনঃ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: whitesmoke;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
</style>
</head>
<body>
<h2>বাটন সাইজ</h2>
<p> font-size প্রোপার্টি ব্যবহারের মাধ্যমে বাটনের ফন্ট সাইজ পরিবর্তন করা হয়।</p>
<button class="button button1">১০ পিক্সেল</button>
<button class="button button2">১২ পিক্সেল</button>
<button class="button button3">১৬ পিক্সেল</button>
<button class="button button4">২০ পিক্সেল</button>
<button class="button button5">২৪ পিক্সেল</button>
</body>
</html>
বাটনের পেডিং পরিবর্তন করতে padding প্রোপার্টি ব্যবহার করুনঃ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: whitesmoke;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 16px;}
.button5 {padding: 32px 16px;}
</style>
</head>
<body>
<h2>বাটন সাইজ</h2>
<p>padding প্রোপার্টির মাধ্যমে বাটনের পেডিং পরিবর্তন করা হয়।</p>
<button class="button button1">১০ পিক্সেল ২৪ পিক্সেল</button>
<button class="button button2">১২ পিক্সেল ২৮ পিক্সেল</button>
<button class="button button3">১৪ পিক্সেল ৪০ পিক্সেল</button>
<button class="button button4">১৬ পিক্সেল</button>
<button class="button button5">৩২ পিক্সেল ১৬ পিক্সেল</button>
</body>
</html>
বাটনের কোণগুলোকে গোলাকৃতি করার জন্য border-radius প্রোপার্টি ব্যবহার করুনঃ
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: teal;
border: none;
color: whitesmoke;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>গোলাকৃতি বাটন</h2>
<p>বাটনের কোণগুলোকে গোলাকৃতি করার জন্য border-radius প্রোপার্টি ব্যবহার করা হয়েছে।</p>
<button class="button button1">২ পিক্সেল</button>
<button class="button button2">৪ পিক্সেল</button>
<button class="button button3">৮ পিক্সেল</button>
<button class="button button4">১২ পিক্সেল</button>
<button class="button button5">৫০%</button>
</body>
</html>
বাটনে বর্ডার কালার যুক্ত করতে border প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1738
আপনি বাটনে হোবার ইফেক্ট যুক্ত করতে hover সিলেক্টর ব্যবহার করুন।
পরামর্শঃ হোভার এর গতি নিয়ন্ত্রন করার জন্য transition-duration প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1740
বাটনে শ্যাডো যুক্ত করার জন্য box-shadowপ্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1742
একটি বাটনকে ডিজেবল এর মত দেখানোর জন্য বাটনে opacity প্রোপার্টি ব্যবহার করুন।
পরামর্শঃ যখন আপনি বাটনের উপর মাউস নিয়ে যাবেন তখন একটি "no parking sign" দেখানোর জন্য cursor প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1744
ডিফল্ট ভাবে একটি বাটনের সাইজ এর ভিতর অবস্থিত টেক্সটের সাইজের উপর নির্ভর করে। একটি বাটনের সাইজ পরিবর্তন করতে width প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1745
বাটন গুলো থেকে মার্জিন বাদ দিয়ে float:left প্রোপার্টি যুক্ত করে বাটনের গ্রুপ তৈরি করা যায়ঃ
kt_satt_skill_example_id=1746
বর্ডার সহ বাটন গ্রুপ তৈরি করতে বাটন গ্রুপের সাথে border প্রোপার্টি ব্যবহার করুনঃ
kt_satt_skill_example_id=1748
একটি বাটনে আপনি বিভিন্ন ধরনের এনিমেশন যুক্ত করতে পারবেন। তার মধ্যে আমরা নিম্নের বাটনের ভিতর হোবার ইফেক্টে এরো (arrow ) চিহ্ন যুক্ত করবোঃ
kt_satt_skill_example_id=1749
এই উদাহরনে আমরা বাটন ক্লিকে একটি রিপল("ripple") ইফেক্ট যুক্ত করবোঃ
kt_satt_skill_example_id=1751
এই উদাহরনে আমরা বাটন ক্লিকে একটি প্রেস("pressed") ইফেক্ট যুক্ত করবোঃ
kt_satt_skill_example_id=1752
Read more
or
